<template>
	<view>
		<np-navbar :bgColor="topBackground.show ? topBackground.colorList : globalConfig.background" backState="2000" type="fixed"
		 :shadow="false" slotHeight="80">
			<view class="logo-box" slot="left">
				<image v-if="hasLogin" :src="userInfo.avatar_url || '/static/images/missing-face.png'" class="np-avatar"></image>
				<image v-else :src="globalConfig.logo" class="logo"></image>
			</view>
			<view class="np-search-box" @click="navTo('/pages/search/search')">
				<text class="np-search-icon npIcon-search"></text>
				<view class="np-input-box">输入标题或关键字搜索</view>
			</view>
			<view slot="view" class="np-tabbar-height">
				<np-tab v-model="tabIndex" :tabs="tabList" :tab-width="100" @change="tabSelect"></np-tab>
			</view>
		</np-navbar>

		<view class="np-swiper-background-box" :class="[topBackground.show?'show':'']">
			<view class="swiper-background" :style="[{backgroundImage:topBackground.background}]" :class="[topBackground.show?'show':'']"></view>
		</view>
		
		<tab-item v-if="indexHasLoad" v-for="(tabItem,tabs) in tabList" :key="tabs" ref="mescrollItem" :i="tabs" :index="tabIndex" :tabs="tabList" :downTextWhite="topBackground.show">
			<module v-if="tabs==0" :indexData="indexData" @swiperChange="swiperChange"></module>
			<block v-show="tabIndex != 0 && tabs == tabIndex">
				<np-grid :navs='tabItem.list' :navSearch="true" :round="true" :bgRound="true"></np-grid>
				<image v-if="tabItem.ad_pic" class="ad-image" :src="tabItem.ad_pic" mode="widthFix" @click="navTo(tabItem.ad_url)" />
			</block>
		</tab-item>
		
		<aui-poster ref="poster" :mask="auiPoster.mask" :maskTapClose="auiPoster.maskTapClose" :image="auiPoster.image"
		 @callback="adClick"></aui-poster>
		<!-- #ifdef H5 -->
		<np-tabbar path="/pages/tabbar/index"></np-tabbar>
		<!-- #endif -->
	</view>
</template>

<script>
	import base from '@/common/base.js'
	import {
		aui
	} from '@/common/aui/js/aui.js';
	import module from './components/module.vue'
	import tabItem from './components/tabItem.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	export default {
		mixins: [base, MescrollMoreMixin],
		components: {
			module,
			tabItem
		},
		data() {
			return {
				indexHasLoad: false,
				tabIndex: 0,
				tabList: [],
				indexData: {},
				current: 0,
				topBackground: {
					showNavColor: true,
					show: false,
					background: '',
					colorList: '',
					onPageScroll: false
				},
				auiPoster: {
					mask: true,
					maskTapClose: false,
					image: '',
					item: {}
				}
			}
		},
		onLoad() {
			this.initData();
			if (this.globalConfig && this.globalConfig.name) {
				uni.setNavigationBarTitle({
					title: this.globalConfig.name
				});
			}
			// #ifdef H5
			this.indexHasLoad = true;
			// #endif
		},
		onPageScroll(res) {
			if (this.tabIndex != 0) {
				return;
			}
			if (res.scrollTop < 100) {
				this.topBackground.onPageScroll = false;
				this.topBackground.show = true;
			} else {
				this.topBackground.onPageScroll = true;
				this.topBackground.show = false;
			}
		},
		watch: {
			globalConfig() {
				if (this.globalConfig.name) {
					uni.setNavigationBarTitle({
						title: this.globalConfig.name
					});
				}
			},
			reloadIndex() {
				// #ifdef MP-WEIXIN||MP-QQ
				if (this.reloadIndex) {
					this.indexHasLoad = false;
					this.initData();
					this.setReloadIndex(false);
				}
				// #endif
			},
		},
		onShareAppMessage(res) {
			let parentId = this.$config.getParentId();
			if (this.hasLogin) {
				parentId = this.userInfo.id;
			}
			let path = '/pages/tabbar/index?uid=' + parentId;
			let title = this.globalConfig.name + ' - 领千万隐藏优惠券';
			return {
				title: title,
				path: path,
			};
		},
		methods: {
			tabSelect() {
				if (this.tabIndex != 0) {
					this.topBackground.show = false;
				} else {
					this.topBackground.show = true;
				}
			},
			swiperChange(e) {
				let banner = this.indexData.banner[e];
				this.topBackground.background = this.$config.getBgColor(banner.bg_color);
				this.topBackground.colorList = banner.bg_color;
				if (this.tabIndex == 0 && !this.topBackground.onPageScroll) {
					this.topBackground.show = true;
				}
			},
			initData() {
				// #ifdef H5
				uni.getStorage({
					key: "indexData",
					success: (res) => {
						let result = JSON.parse(res.data);
						this.setData(true, result);
						setTimeout(() => {
							this.getIndexData();
						}, 300);
					},
					fail: (res) => {
						this.getIndexData();
					}
				});
				// #endif
				// #ifdef MP-WEIXIN||MP-QQ
				this.getIndexData();
				// #endif
			},
			getIndexData() {
				this.$http.get('api/default/index').then((result) => {
					this.setData(false, result);
				}).catch((error) => {});
			},
			setData(cache,result) {

				if (result.banner.length > 0) {
					this.topBackground.background = this.$config.getBgColor(result.banner[0].bg_color);
					this.topBackground.colorList = result.banner[0].bg_color;
					this.topBackground.show = true;
				}
				this.tabList = [{
					id: 0,
					title: '推荐',
					page: 1,
					min_id: 1,
					api: 'hdk'
				}];
				let tabList = result.navbar || [];
				tabList.forEach(item => {
					item.page = 1;
					item.min_id = 1;
					item.api = 'hdk';
					this.tabList.push(item);
				});
				if (result.adv) {
					this.auiPoster.image = result.adv.image;
					this.auiPoster.item = result.adv;
					setTimeout(() => {
						this.$refs.poster.show();
					}, 300)
				}
				this.indexData = result;
				// #ifdef MP-WEIXIN||MP-QQ
				if (!cache) {
					this.indexHasLoad = true;
				}
				// #endif
				this.$config.setJson('indexData', result);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			adClick(e) {
				if (e.type === 'close') {
					return;
				}
				let item = this.auiPoster.item;
				this.$config.navTo(item);
			}
		}
	}
</script>

<style lang="scss">
	.logo-box {
		display: flex;
		height: 88rpx;
		justify-content: center;
		align-items: center;
	}

	.logo {
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border-radius: 4rpx;
	}

	.swiper-box {
		height: 100%;

	}

	.list-scroll-content {
		height: 100%
	}
	
	.np-avatar {
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		border: 5rpx solid #fff;
		border-radius: 50%;
	}

	.np-search-box {
		width: 600rpx;
		/* #ifdef H5 */
		margin-left: 60rpx;
		/* #endif */
		/* #ifdef MP-WEIXIN */
		width: 400rpx;
		margin-right: 100rpx;
		/* #endif */
		/* #ifdef MP-QQ */
		width: 400rpx;
		margin-right: 100rpx;
		/* #endif */
		height: 64rpx;
		background-color: #f5f5f5;
		border-radius: 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0rpx 20rpx;
		color: #777777;
	}

	.np-search-icon {
		height: 44rpx;
		width: 29rpx;
		height: 28rpx;
		font-size: 24rpx;
	}

	.np-input-box {
		width: 100%;
		height: 44rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
	}

	.header-tab {
		height: 100rpx;
		padding: 20rpx 0;
	}

	.np-swiper-background-box {
		position: absolute;
		/* #ifdef MP-WEIXIN */
		height: 378rpx;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		height: 348rpx;
		/* #endif */
		width: 100%;
		top: 0;
		display: none;
		transition: 0s;

		.swiper-background {
			position: absolute;
			height: 100%;
			width: 100%;
			opacity: 0;
			top: 0;
			background-size: cover;
			transition: opacity .25s;
		}

		.swiper-background.show {
			opacity: 1;
			transition: opacity .25s;
		}
	}

	.np-swiper-background-box.show {
		display: block;
		transition: 0s;
	}
</style>
